<template>
    <view class="base_style order">
        <view class="order_title flex_b">
            <view class="order_title_l">订单编号</view>
            <view class="order_title_r">{{orderId }}</view>
        </view>
        <view class="order_step">
            <view class="order_step_title mb24">订单进度记录</view>
            <view class="steps">
                <view class="step_item">
                    <view class="step_item_title">
                        <view class="dot"></view>
                        <view class="text">打卡时间和地点</view>
                        <view class="time">{{ getTime(clockNodeInfo?.createTime) ?? '' }}</view>
                    </view>
                    <view class="step_item_content">
                        {{ clockNodeInfo?.signPlace }}
                    </view>
                </view>
                <view class="step_item">
                    <view class="step_item_title">
                        <view class="dot"></view>
                        <view class="text">完工</view>
                        <view class="time">{{ getTime(workNodeInfo?.createTime) ?? '' }}</view>
                    </view>
                    <view class="step_item_content">
                        已提交完工请求，等待客户确认
                    </view>
                </view>
            </view>
        </view>
    </view>
    <view class="order_evaluate">
        <view class="order_evaluate_title">干活拍照</view>
        <view class="work_picture mt24">
            <image class="picture" v-for="(item, index) in workNodeImg" :key="item" :src="item"
                @click="previewImage(index)" />
        </view>
        <view class="evaluate">
            <view class="evaluate_title">师傅评价</view>
            <view class="evaluate_item flex_b">
                <view class="item">服务态度</view>
                <view class="value">
                    <up-rate v-model="evaluateForm.serverPoint" active-color="#FFB200" inactiveIcon="star-fill"
                        inactive-color="#F1F1F1" gutter="5"></up-rate>
                </view>
            </view>
            <view class="evaluate_item flex_b">
                <view class="item">是否按时到场</view>
                <view class="value">
                    <up-radio-group activeColor="#FE6E04;" v-model="evaluateForm.timePoint" placement="row">
                        <up-radio :customStyle="{ marginLeft: '20rpx' }" size="14"
                            v-for="(item, index) in timeRadiolist" :key="index" :label="item.name" :name="item.value">
                        </up-radio>
                    </up-radio-group>
                </view>
            </view>
            <view class="evaluate_item flex_b">
                <view class="item">干活怎么样</view>
                <view class="value">
                    <up-radio-group activeColor="#FE6E04;" v-model="evaluateForm.workPoint" placement="row">
                        <up-radio :customStyle="{ marginLeft: '20rpx' }" size="14"
                            v-for="(item, index) in workRadiolist" :key="index" :label="item.name" :name="item.value">
                        </up-radio>
                    </up-radio-group>
                </view>
            </view>
            <view class="evaluate_remark">评价留言</view>
            <up-textarea placeholderStyle="font-size: 26rpx;color:#888888" v-model="evaluateForm.comment" border="none"
                placeholder="说说你的评价吧…"></up-textarea>
        </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom_btn">
        <view class="btn flex_c" @click="submit">确认提交</view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { createComment } from "@/api/customerPage/order";
import { getWorkerCheckPhoto } from "@/api/workerPage/order"
import { getTime } from '@/utils';
const props = defineProps<{
    orderId: string
    nodePage: any
}>()
const clockNodeInfo = ref<any>({})
const workNodeInfo = ref<any>({})
watch(() => props.nodePage, () => {
    // 打卡信息
    clockNodeInfo.value = props.nodePage.find((item: any) => {
        return item.status == 1
    })
    // 完工拍照
    workNodeInfo.value = props.nodePage.find((item: any) => {
        return item.status == 2
    })
    getWorkNodeImg(workNodeInfo.value?.id)
})
// 根据nodeid查询图片
const workNodeImg = ref<string[]>([])
const getWorkNodeImg = async (id: any) => {
    if (id) {
        const res: any = await getWorkerCheckPhoto(id)
        if (res.code == 0 && res.data) {
            workNodeImg.value = res.data.list.map((item: any) => {
                return item.imagePath
            })
        }
    }
}

// 预览图片
const previewImage = (index: number) => {
    uni.previewImage({
        current: index, // 当前显示图片的http链接
        urls: workNodeImg.value // 需要预览的图片http链接列表
    });
}

interface EvaluateForm {
    orderId: string
    serverPoint: number
    timePoint: number
    workPoint: number
    comment: string
}

const timeRadiolist = [
    { name: "提前", value: 1 },
    { name: "按时", value: 2 },
    { name: "迟到", value: 3 }
]
const workRadiolist = [
    { name: "很好", value: 1 },
    { name: "一般", value: 2 },
    { name: "差", value: 3 },
    { name: "很差", value: 4 }
]
const evaluateForm = reactive<EvaluateForm>({
    orderId: "",
    serverPoint: 5, // 几星好评
    timePoint: 1, // 是否按时 1提前 2按时 3迟到
    workPoint: 1, // 工作情况 1很好 2一般 3差 4很差
    comment: "" // 评价留言
})

const submit = () => {
    evaluateForm.orderId = props.orderId
    createComment(evaluateForm).then((res: any) => {
        if (res.code == 0 && res.data) {
            uni.showToast({
                title: "评价成功",
                icon: "none"
            })
            uni.setStorageSync("loadData", true)
            setTimeout(() => {
                uni.switchTab({ url: '/pages/tabbar/customerOrder/customerOrder' })
            }, 500)
        }

    })
}
</script>

<style lang="scss" scoped>
.base_style {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;
}

.order {
    .order_title {
        height: 96rpx;
        border-bottom: 2rpx solid #F8F8F8;
        font-size: 28rpx;
        color: #222222;

        &_l {
            font-weight: 600;
        }
    }

    .order_step {
        padding: 24rpx 0;

        .order_step_title {
            font-weight: 600;
            font-size: 28rpx;
            color: #222222;
        }
    }
}

.order_evaluate {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;

    .order_evaluate_title {
        font-weight: 600;
        font-size: 28rpx;
        color: #222222;
    }

    .work_picture {
        margin-bottom: 24rpx;
        display: flex;
        flex-wrap: wrap;

        .picture {
            width: 144rpx;
            height: 144rpx;
            border-radius: 16rpx;
            margin-left: 16rpx;
        }
    }

    .evaluate {
        padding-top: 24rpx;
        border-top: 2rpx solid #F8F8F8;

        .evaluate_title {
            font-weight: 600;
            font-size: 28rpx;
            color: #222222;
        }

        .evaluate_item {
            margin-top: 24rpx;
            font-size: 28rpx;
            color: #555555;
        }

        .evaluate_remark {
            font-size: 28rpx;
            color: #555555;
            margin-top: 28rpx;
            margin-bottom: 24rpx;
        }
    }
}

.bottom_btn {
    width: 750rpx;
    height: 198rpx;
    background: #ffffff;
    position: fixed;
    bottom: 0;

    .btn {
        width: 650rpx;
        height: 80rpx;
        background: #fe6e04;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        font-weight: 600;
        font-size: 32rpx;
        color: #ffffff;
        margin: 0 auto;
        margin-top: 36rpx;
    }
}

.steps {
    width: 100%;

    .step_item {
        &_title {
            display: flex;
            align-items: center;

            .dot {
                width: 16rpx;
                height: 16rpx;
                background: #FE6E04;
                border-radius: 50%;
            }

            .text {
                font-weight: 700;
                font-size: 28rpx;
                color: #555555;
                margin-left: 16rpx;
            }

            .time {
                font-size: 26rpx;
                color: #888888;
                margin-left: 16rpx;
            }
        }

        &_content {
            font-size: 28rpx;
            color: #555555;
            border-left: 2rpx solid #FE6E04;
            padding: 12rpx 0 52rpx 24rpx;
            box-sizing: border-box;
            margin-left: 7rpx;
        }
    }

    .step_item:nth-last-child(1) {
        .step_item_content {
            border: none !important;
            padding-bottom: 0 !important;
        }
    }
}
</style>